<script setup>
import {onMounted, ref} from 'vue';
import {FolderIcon, LinkIcon, TableIcon} from "tdesign-icons-vue-next";
import {useRouter} from "vue-router";
import {getAllLink, getAllPool, getAllScheme} from "../../apis/index.js";

const router = useRouter()
// 所有连接数据

const linkItems = ref([
  // {
  //   // 连接名
  //   label: 'cert',
  //   type:'link',
  //   children: [
  //     {
  //       // 数据库名
  //       label: 'sys',
  //       type:'pool',
  //       children:[
  //         {
  //           // 表名
  //           label:"sys_config",
  //           value:'111',
  //           type:'scheme'
  //         }
  //       ]
  //     }
  //   ],
  // }
]);

const selectedDBName = ref('')

const selectedLinkId = ref('')

// 点击数据库表
const onClick = async (context) => {
  const {node} = context;
  console.log(node.data)
  // 点击的是link
  if (node.data.type === 'link') {
    let res = await getAllPool(node.data.id)
    selectedLinkId.value = node.data.id
    console.log(res)
    if (res.code === 1) {
      let arr = []
      res.data.forEach((item) => {
        let obj = {
          label: item,
          type: 'pool',
          children: []
        }
        arr.push(obj)
      })

      let temp = JSON.parse(JSON.stringify(linkItems.value))

      temp.forEach((item, index) => {
        if (item.label === node.data.label) {
          temp[index].children = arr
        }
      })

      linkItems.value = temp
    } else {
      //   报错
    }
  }
  // 点击的是库
  if (node.data.type === 'pool') {
    // console.log(node.data)
    selectedDBName.value = node.data.label
    let res = await getAllScheme(node.data.label, selectedLinkId.value)
    console.log(res)

    if (res.code === 1) {
      let temp = JSON.parse(JSON.stringify(linkItems.value))
      let arr = []

      res.data.forEach((item, index) => {
        let obj = {
          label: item,
          type: 'scheme'
        }

        arr.push(obj)
      })
      // console.log(arr)

      // console.log(selectedDBName,selectedLinkId)
      temp.forEach((link, linkIndex) => {
        if (link.id === selectedLinkId.value) {
          temp[linkIndex].children.forEach((pool, poolIndex) => {
            if (pool.label === selectedDBName.value) {
              // console.log(pool)
              pool.children = arr
            }
          })
        }
      })

      linkItems.value = temp
      console.log(linkItems.value)
    } else {
      //   错误
    }
    // let res = await getAllScheme()
  }
  // 点击的是表
  if (node.data.type === 'scheme') {
    console.log(node.data.label)
    await router.push('/')
    router.push({
      path: '/editor',
      query: {
        dbName: selectedDBName.value,
        id: selectedLinkId.value,
        tableName: node.data.label,
      }
    })
  }
};

onMounted(async () => {
  let res = await getAllLink()
  // console.log(res)
  let arr = []
  res.data.forEach((item) => {
    let obj = {
      label: item.connectionName,
      type: 'link',
      id: item.id,
      children: []
    }
    arr.push(obj)
  })
  linkItems.value = arr
})
</script>

<template>
  <t-aside style="border-top: 1px solid #EEEEEE;min-height: calc(100vh - 60px)">
    <t-tree :data="linkItems" @click="onClick" :expand-on-click-node="true" activable expandAll>
      <template #icon="{ node }">
        <LinkIcon v-if="node.data.type === 'link'"/>
        <FolderIcon v-if="node.data.type === 'pool'"/>
        <TableIcon v-if="node.data.type === 'scheme'"/>
      </template>
    </t-tree>
  </t-aside>
</template>

<style scoped>

</style>
